import React, { useState, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import { ButtonNavigation, ButtonNavigationItem, Icon } from 'bee-mobile'


function SwitchBar ({ list }) {
	const history = useHistory()
	const location = useLocation()
	const [selectIndex, setSelectIndex] = useState(0)
	useEffect(() => {
		setSelectIndex(list.findIndex(item => item.path === location.pathname))
	}, [list, location.pathname])
	return (
		<div className='switchbar-container'>
			{
				selectIndex > -1 &&
				<ButtonNavigation
					activeIndex={selectIndex}
					onChange={({ index }) => {
						history.replace(list[index].path)
					}}
				>
					{
						list.map((item, index) => (
							<ButtonNavigationItem key={index} label={item.meta.text} icon={<Icon size='2x' icon={item.meta.icon} />} />
						))
					}
				</ButtonNavigation>
			}
		</div>
	)
}
SwitchBar.defaultProps = {
	list: []
}
export default SwitchBar